<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <link rel="stylesheet" href="/aaa/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/aaa/layuiadmin/style/admin.css" media="all">
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">操作员</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" id="name" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline" style="margin-left: -100px;">
                    <div class="layui-input-block">
                        <select id="type">
                            <option value="1">创建时间</option>
                            <option value="2">修改时间</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline" style="margin-left: -70px;">
                    <div class="layui-input-block">
                        <input type="text" name="beginTime" id="beginTime" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline" style="margin-left: -40px;">
                    <label class="layui-form-label">----------</label>
                    <div class="layui-input-block">
                        <input type="text" name="endTime" id="endTime" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <button id="notice-searchbtn" class="layui-btn layuiadmin-btn-admin" lay-submit lay-filter="LAY-user-back-search">
                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                    </button>
                </div>
            </div>
        </div>
<div class="layui-card-body">
    <button class="layui-btn" id="addNotice">
        <i class="layui-icon">&#xe608;</i> 添加公告
    </button>
<table class="layui-hide" id="noticeManage" lay-filter="noticeManage-filter"></table>
<script type="text/html" id="imgurlTep">
<img src="{{d.imgurl}}" />
</script>
    <script type="text/html" id="noticeChange-bar">
        <a class="layui-btn layui-btn-xs" lay-event="notice-edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="notice-del">删除</a>
    </script>
</div>
</div>
</div>


<div id="notice-layer" style="display: none">
    <div class="layui-form layui-card-header layuiadmin-card-header-auto">
    <input id="notice-id" type="hidden" /> <!--type="hidden"-->
    <div class="layui-form-item">
        <label class="layui-form-label">公告描述</label>
        <div class="layui-input-inline">
            <input type="text" id="notice-desc" required  lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">公告内容</label>
        <div class="layui-input-inline">
            <textarea id="notice-content" cols="25" rows="8"></textarea>
        </div>
    </div>

        <div class="layui-form-item">
            <div class="layui-input-inline">
                <button type="button" class="layui-btn" id="test1">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button>
                <h6 style="color: red;font-size: 8px">该过程可能较缓慢,请耐心等待</h6>
                <img id="notice-imgurl"  src="" style="width: 100px;height: 80px;"/>
            </div>
        </div>


        <div class="layui-form-item">
            <div class="layui-input-block">
                <input type="button" value="保存" class="layui-btn" id="notice-save"/>
            </div>
    </div>
</div>
</div>

<script src="/aaa/layuiadmin/layui/layui.js"></script>
<script th:inline="none">
    var noticelayer;
    layui.use('table', function(){
        var table = layui.table;
        var $ = layui.$;

        $('#addNotice').click(function () {
            $("#notice-id").val("");
            $("#notice-desc").val("");
            $("#notice-content").val("");
            //$("#notice-imgurl").src==data.imgurl;
            $("#notice-imgurl").attr('src',"");
            noticelayer=layer.open({
                type: 1,
                title:'添加公告',
                width:500,
                content: $('#notice-layer')
            });
        });

        $('#notice-save').click(function () {

            $.post({
                url:'/aaa/webnotice/addOrUpdateNotice',
                data:{
                    noticeId:$("#notice-id").val(),
                    noticeDesc:$("#notice-desc").val(),
                    notice:$("#notice-content").val(),
                    imgurl:$("#notice-imgurl")[0].src
                },
            },function (data) {
                if(data.code==200){
                    if(!$("#notice-id").val() || !$("#notice-id").val("")) {
                        layer.msg('公告添加成功!');
                    }else{
                        layer.msg('公告修改成功!');
                    }
                }else{
                    if(!$("#notice-id").val()) {
                        layer.msg('公告添加失败,请重试!');
                    }else{
                        layer.msg('公告修改失败,请重试!');
                    }
                }
                layer.close(noticelayer);
                table.reload('noticeManage');
            })
        });

        //第一个实例
        table.render({
            elem: '#noticeManage'
            ,height: 312
            ,url: '/aaa/webnotice/getAllNotice' //数据接口
            ,page: true //开启分页
            ,cols: [
                [
                {field: 'name', title: '操作人',align:'center'}
                ,{field: 'notice_desc', title: '公告描述', align:'center'}
                ,{field: 'notice', title: '公告内容',align:'center'}
                ,{field: 'createtime', title: '创建时间',align:'center'}
                ,{field: 'updatetime', title: '最近修改', align:'center'}
                ,{field:'imgurl', title: '图片', width: 200, templet: '#imgurlTep'}
                ,{field:'yyy', title: '操作', width: 200, toolbar: '#noticeChange-bar', align:'center'}
                //,{field: 'wealth', title: '财富', width: 135, sort: true}
            ]
            ],
            //显示大图-----------------------------------------------------------------------------------------------
            done:function(res,curr,count){
                hoverOpenImg();//显示大图
                $('table tr').on('click',function(){
                    $('table tr').css('background','');
                    $(this).css('background','<%=PropKit.use("config.properties").get("table_color")%>');
                });
            }

        });

//显示大图-----------------------------------------------------------------------------------------------
        function hoverOpenImg(){
            var img_show = null; // tips提示
            $('td img').hover(function(){
                var kd=$(this).width();
                kd1=kd*3;          //图片放大倍数
                kd2=kd*3+30;       //图片放大倍数
                var img = "<img class='img_msg' src='"+$(this).attr('src')+"' style='width:"+kd1+"px;' />";
                img_show = layer.tips(img, this,{
                    tips:[2, 'rgba(41,41,41,.5)']
                    ,area: [kd2+'px']
                });
            },function(){
                layer.close(img_show);
            });
            $('td img').attr('style','max-width:70px;display:block!important');
        }


        $('#notice-searchbtn').click(function () {
            table.reload('noticeManage', {
                url: '/aaa/webnotice/getAllNotice',
                where: {
                    name:$("#name").val(),
                    type:$("#type").val(),
                    beginTime:$("#beginTime").val(),
                    endTime:$("#endTime").val()
                } //设定异步数据接口的额外参数
                //,height: 300
            });
        });

        table.on('tool(noticeManage-filter)', function(obj){
            var data = obj.data;
           if(obj.event === 'notice-del'){
                layer.confirm('确定删除该行数据？', function(index){
                    $.post({
                        url:'/aaa/webnotice/delNoticeById',
                        data:{
                            noticeId:data.notice_id
                        },
                    },function (data) {
                        if(data.code==200){
                            layer.msg('删除成功');
                        }else{
                            layer.msg('删除失败,请重试');
                        }
                        obj.del();
                        layer.close(index);
                    })
                });
            } else if(obj.event === 'notice-edit'){
               $("#notice-id").val(data.notice_id);
               $("#notice-desc").val(data.notice_desc);
               $("#notice-content").val(data.notice);
               //$("#notice-imgurl").src==data.imgurl;
               $("#notice-imgurl").attr('src',data.imgurl);

               noticelayer = layer.open({
                   type: 1,
                   title:'修改公告信息',
                   width:500,
                   content: $('#notice-layer')
               });
            };
        });

    });

    layui.use('laydate', function(){
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#endTime' //指定元素
            ,type: 'datetime'
        });

        laydate.render({
            elem: '#beginTime' //指定元素
            ,type: 'datetime'
        });
    });


    layui.use('upload', function(){
        var $ = layui.$;
        var upload = layui.upload;
        //执行实例
        var uploadInst = upload.render({
            elem: '#test1' //绑定元素
            ,url: '/aaa/webnotice/uploadPhoto' //上传接口
            ,accept: 'file'
            ,done: function(res){
                if(res.code==0){
                    $("#notice-imgurl").attr('src',res.data);
                    layer.msg('图片上传成功');
                }else{
                    layer.msg('图片上传失败,请重试');
                }

            }
            ,error: function(){
                //请求异常回调
            }
        });
    });




</script>
</body>
</html>
<!--<label class="layui-form-label">创建时间</label>
                        <input type="text" name="beginTime" id="beginTime" placeholder="请输入" autocomplete="off" class="layui-input">
                        &#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;
                        <label class="layui-form-label"></label>
                        <input type="text" name="endTime" id="endTime" placeholder="请输入" autocomplete="off" class="layui-input">-->